<%--
  Created by IntelliJ IDEA.
  User: aiwzy
  Date: 2022/4/18
  Time: 15:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的菜谱</title>
    <link rel="stylesheet" href="../css/me.css" type="text/css">
    <link rel="stylesheet" href="../css/head.css" type="text/css">
    <style type="text/css">
        .search{
            width: 500px;
            height: 40px;
            border-radius: 18px;
            outline: none;
            border: 1px solid #ccc;
            padding-left: 20px;
            position: absolute;
        }
        .btn{
            height: 35px;
            width: 60px;
            position: absolute;
            background: pink;
            top: 18px;
            left: 525px;
            outline: none;
            cursor: pointer;
            border-radius: 40%;
        }
    </style>
</head>
<script type="text/javascript">
    var http_request ="<%=request.getContextPath() %>";
</script>
<body>
<div class="head">
    <ul class="u1">
        <li><a href="../index.jsp" >美食天下 首页</a></li>
        <li><a href="http://localhost:8080/system/dish.jsp">菜谱</a></li>
        <li><a href="http://localhost:8080/system/cook.jsp">食材</a></li>
        <li><a href="#">专题</a></li>
        <li><a href="#">笔记</a></li>
        <li><a href="#">社区</a></li>
        <li><a href="#">活动</a></li>
        <li><a href="#">搜索</a></li>
    </ul>
    <a class="nr" href="#"><img src="../image/nr3.png" style="width: 18px;height: 18px;margin-top: 5px;"/><br/>客户端</a>
    <ul class="u2" style="
    position: fixed;
    right: 68px;
    top: -13px;
    margin-right: 4px;">
        <li class="pic">
            <img src="
<%--        <c:if test="${!sessionScope.user.avatar.equals('')}">--%>
        <c:if test="${!sessionScope.user.avatar.equals('')}">
        ${sessionScope.user.avatar}
        </c:if>
        <c:if test="${!sessionScope.user.avatar.equals('')}">
        https://tse2-mm.cn.bing.net/th/id/OIP-C.Z8cO0OriANaUVakbQ6n0BwAAAA?w=153&h=165&c=7&r=0&o=5&dpr=1.65&pid=1.7
        </c:if>
" onclick="jump()" style="width: 35px;height: 35px; border-radius: 45%;cursor: pointer" >
            <script src="../js/jquery-3.2.1.min.js"></script>
            <script type="text/javascript">
                function jump(){
                    var src = $("img")[0].src;
                    $.ajax({
                        url:"/system/member.jsp",
                        data:{
                            img:src
                        },
                        dataType:"text",
                        success:function (){
                            alert("欢迎来到个人中心！")
                            window.location.href=http_request+"/system/member.jsp"
                        },
                        error:function (){
                            alert("个人中心跳转失败！")
                        }
                    })
                }
            </script>

        </li>
        <li class="l2">
            <c:if test="${empty sessionScope.user.username}">
                <div class="d1" >
                    <a href="/checkLogin" >登录/注册</a>
                </div>
            </c:if>
            <c:if test="${not empty sessionScope.user.username}">
                <div class="d1" >
                    <a href="http://localhost:8080/system/member.jsp"  style="font-size: 15px; text-align: center; vertical-align: middle">${sessionScope.user.username}</a>
                </div>
            </c:if>
        </li>
        <li class="l1"><div><a href="http://localhost:8080/system/makeCook.jsp"><img src="../image/nr1.png" style="width: 18px;height: 18px;margin-top: 5px;margin-right: 2px;"/><br/>发布</a></div></li>
        <li class="l1">
            <div>

                <img id="a1" src="../image/nr2.png" style="width: 18px;height: 18px;margin-top: 5px;margin-right: 2px"/><br/>
                <span id="s1">签到有礼</span>
                <script type="text/javascript">
                    $(function (){
                        <c:if test="${not empty sessionScope.user.username}">
                        $("#a1").click(function (){
                            $("#s1").html("已签到");
                        })
                        </c:if>
                        <c:if test="${ empty sessionScope.user.username}">
                        $("#a1").click(function (){
                            alert("请您先进行登录。。。")
                        })
                        </c:if>


                    })
                </script>


            </div>
        </li>
    </ul>
</div>
<!-- 主框架 -->
<div>

    <div class="mod_left">
        <div class="menu_wrap">
            <dl>
                <dt >
                    <a  href="http://localhost:8080/system/member.jsp">会员<br>中心</a>
                </dt>
                <dt >
                    <a class=on href="http://localhost:8080/system/myCook.jsp">菜谱</a>
                </dt>

                <dt >
                    <a  href="#">话题</a>
                </dt >
                <dt >
                    <a   href="#">日志</a>
                </dt>
                <dt >
                    <a  href="../index.jsp">菜单</a>
                </dt>
                <dt >
                    <a  href="#">收藏</a>
                </dt>
                <dt >
                    <a  href="#">账户<br>设置</a>
                </dt>
            </dl>
        </div>

    </div>

    <!-- 右侧 -->
    <div class="mod_right">

        <div id="mod_location">
            <div class="mod_location clear">
                <div class="left">
                    <a href="http://localhost:8080/system/member.jsp" class=on>我的菜谱</a>
                </div>
                <div class="right">
                    <a class="add" href="http://localhost:8080/system/makeCook.jsp" >发布新菜谱</a>
                </div>
            </div>
        </div>

        <div class="ui_newlist_1 get_num mt60 clear" id="J_list">
            <div class="m_search clear search_b ">
                <input name="recipename" id="tbid" class="search" onkeydown="keyLogin()" placeholder="搜索我发布的菜谱" type="text" value="">&nbsp;
                <input value="&#12288;搜索&#12288;" type="submit" id="tbid_btn" class="ui_btn btn" />
            </div>
            <div class="ui_no_data" style="margin-top: 20px">
                <ul>
                    <c:forEach var="dish" items="${sessionScope.dishList}"  end="${sessionScope.dishList.size()}">
                    <li style="height: 400px">
                        <div class="d11" ><img style="width: 200px;height: 200px;transform: scale(1.2);
    transition: all 0.5s ease-in-out;" src="${dish.img}" /></div>
                        <a style=" display: block;
    width: 230px;
    height: 32px;
    text-align: center;
    font-size: 18px;
    text-decoration: none;
    color: #333;
margin-top: 20px;" href="cook.jsp">${dish.dname}<br/></a>
                        <input type="text" value="${dish.uname}" id="uname" name="uname" hidden/>
                        <a style="display: block;
    width: 230px;
    height: 32px;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    color: #999;" href="member.jsp">${dish.uname}</a>
                        <button style="    display: block;
    width: 80px;
    height: 32px;
    font-size: 13px;
    text-decoration: none;
    color: white;
    background-color: #ff8d8d;
    cursor: pointer;
    text-shadow: 2px 2px 4px #858080;
    border-radius: 203%;
    border-style: none;
    text-align: center;
    margin: 0 auto;
    margin-top: 4px;" value="${dish.id}"  onclick="delDish(this)"  >删除菜谱</button><button style="    display: block;
    width: 80px;
    height: 32px;
    font-size: 13px;
    text-decoration: none;
    color: white;
    background-color: #ffa859;
    cursor: pointer;
    text-shadow: 2px 2px 4px #858080;
    border-radius: 203%;
    border-style: none;
    text-align: center;
    margin: 0 auto;
    margin-top: 4px;" value="${dish.id}"  onclick="upDish(this)"  >修改菜谱</button>
                    </li>
                </c:forEach>
                </ul>
                <script type="text/javascript">

                   function delDish(event){
                       var username= $("#uname").val();
                       var id = event.value;
                       $.ajax({
                           url:"/deleteDish",
                           method:"get",
                           data:{
                               id:id
                           },
                           dataType:"text",
                           success:function (data){
                               if( data.indexOf("删除成功！") != -1){
                                   $.ajax({
                                       //几个参数需要注意一下
                                       dataType: "text",
                                       url:"/myDishServlet" ,
                                       data: {
                                           username:username
                                       },
                                       success: function (result) {
                                           console.log(result);//打印服务端返回的数据(调试用)

                                           $.ajax({
                                               //几个参数需要注意一下
                                               dataType: "text",
                                               url:"/myDishServlet" ,
                                               data: {
                                                   username:username
                                               },
                                               success: function (result) {
                                                   console.log(result);//打印服务端返回的数据(调试用)
                                                   window.location.href=http_request+"/system/myCook.jsp"
                                               },
                                               error : function() {
                                                   alert("异常！");

                                               }
                                           });

                                       },
                                       error : function() {
                                           alert("异常！");

                                       }
                                   });
                               }else {
                                   alert(data)
                                   window.location.href=http_request+"/system/myCook.jsp"
                               }
                           }
                       })
                   }

                   function upDish(event){
                       alert(event.value)
                       var id1 = event.value;
                       $.ajax({
                           url:"/updateDish",
                           data:{
                               id:id1
                           },
                           dataType:"text",
                           method:"get",
                           success:function (data){
                               window.location.href=http_request+"/system/cookPublish.jsp"
                           }
                       })
                   }
                </script>
                <p>
                    您还没有发布新菜谱噢，快点击这里<a style="color: blueviolet; font-size: 20px" href="http://localhost:8080/system/makeCook.jsp" >发布新菜谱</a>吧！
                </p>

            </div>

        </div><!-- 右侧结束 -->
    </div>

</div>

</body>
</html>
